<template>
  <div class="publish">
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{
            $route.query.id ? "修改文章" : "发布文章"
          }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div style="padding: 20px;">
        <el-form
          :model="article"
          :rules="rules"
          ref="article-verify"
          label-width="60px"
          class="Form"
          label-position="left"
        >
          <el-form-item label="标题:" prop="title">
            <el-col :span="8">
              <el-input v-model="article.title"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="内容:"
            ><!-- 富文本编辑器 -->
            <el-tiptap
            height="400"
              v-model="article.content"
              :extensions="extensions"
              lang="zh"
              placeholder="请输入文章内容"
            ></el-tiptap>
          </el-form-item>

          <el-form-item label="封面:">
            <el-radio-group v-model="article.cover.type">
              <el-radio :label="1">单图</el-radio>
              <el-radio :label="3">三图</el-radio>
              <el-radio :label="0">无图</el-radio>
              <el-radio :label="-1">自动</el-radio>
            </el-radio-group>
            <div>
              
              <template v-if="article.cover.type > 0">
               <uploadCover v-for="upload in article.cover.type" :key="upload"/>
            </template>
            </div>
          </el-form-item>
              
          <el-form-item label="频道:">
            <el-select v-model="article.region" placeholder="请选择">
              <el-option label="Javascript" value="Javascript"></el-option>
              <el-option label="C++" value="C++"></el-option>
              <el-option label="C#" value="C#"></el-option>
              <el-option label="Java" value="Java"></el-option>
              <el-option label="Vue" value="Vue"></el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button
              v-if="!this.$route.query.id"
              type="success"
              @click="onPublis(false)"
              >发表</el-button
            >
            <el-button
              v-if="this.$route.query.id"
              type="primary"
              @click="onPublis(false)"
              >修改</el-button
            >
            <el-button @click="onPublis(true)">存入草稿</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import uploadCover from './components/upload-cover.vue';

import { apiAddArticle, apiGetArticle, apiUpdateArticle } from "@/api/article";
import {
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  //Italic,
  FontSize,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Fullscreen,
  Preview,
  Image
} from "element-tiptap";
export default {
  name: "publish",
  components: {
    //富文本编辑器
    "el-tiptap": ElementTiptap,
    uploadCover,
  },
  created() {
    //如果 路由参数中有id,则请求展示指定文章内容
    if (this.$route.query.id) {
      this.loadArticle();
    }
  },
  data() {
    return {
      article: {
        title: "", //文章标题
        content: "", //文章内容
        //封面
        cover: {
          type: 0, //封面类型    -1:自动，0-无图，1-1张，3-3张
          images: [] //封面图片地址
        },
        region: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      extensions: [
        //富文本编辑器配置
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),//做多有5级标题
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: true }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Image(),//图片
        //new Italic(),//斜体
        new Strike(),//删除线
        new ListItem(),
        new BulletList(),//无序列表
        new OrderedList(),//有序列表
        new FontSize(),//字体
        new Preview(),//预览
        new Fullscreen()//全屏
      ]
    };
  },
  methods: {
    //发表文章
    onPublis(draft = false) {
      //如果是修改文章，则执行修改操作，否则指向发表操作
      const articleid = this.$route.query.id;
      if (articleid) {
        //执行修改操作
        apiUpdateArticle(articleid, this.article, draft).then(res => {
          console.log(res);
        });
      } else {
        //执行发表操作
        this.$refs["article-verify"].validate(val => {
          if (val) {
            alert("表单验证成功,发送AJAX请求");
            apiAddArticle(this.article, draft).then(res => {
              this.$router.push("article"); //发表成后跳页
              console.log(res);
            });
          } else {
            alert("验证失败");
            return;
          }
        });
      }
    },
    //修改文章
    loadArticle() {
      console.log("有id参数");
      apiGetArticle(this.$route.query.id).then(res => {
        //获取到了指定文章的数据
        //把获取到的数据绑定到 article中
        this.article = res.data.data;
      });
    }
  }
};
</script>

<style scoped></style>
